<template>


	<view class="main">
		<view class="title">
			<alltitleVue :title="title" :url="url" />
			<view class="title-two">
				<view class="sucess">
					<image src="../../static/home/one.png" mode=""></image>
					<text>评价已发布</text>
				</view>
				<view class="btn-box">
					<view class="btn" @click="goHome">
						返回首页
					</view>
					<view class="btn" @click="all">
						回到订单
					</view>
				</view>
			</view>
		</view>
		<view class="scroll-Y">
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{ leftList }">
					<view class="demo-warter warter-right" v-for="(item, index) in leftList" :key="index"
						@click="productClick(item)">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image"
							:index="index"></u-lazy-load>
						<view class="box">
							<view class="demo-title">
								{{ item.title }}
							</view>
		
							<view class="demo-tag">
								<view  v-for="(it,ind) in item.label":key="index">
									{{it}}
								</view>
								
							</view>
							<view class="demo-box">
								<view class="demo-price">
									{{ item.price }}元
								</view>
								<view class="demo-shop">
									已售{{ item.virtuals || "0" }}
								</view>
							</view>
						</view>
		
		
					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view class="demo-warter warter-left" v-for="(item, index) in rightList" :key="index"
						@click="productClick(item)">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image"
							:index="index"></u-lazy-load>
						<view class="box">
							<view class="demo-title">
								{{ item.title }}
							</view>
		
							<view class="demo-tag">
								<view  v-for="(it,ind) in item.label":key="index">
									{{it}}
								</view>
							</view>
							<view class="demo-box">
								<view class="demo-price">
									{{ item.price|| 0 }}元
								</view>
								<view class="demo-shop">
									已售{{ item.virtuals || "0" }}
								</view>
							</view>
						</view>
		
					</view>
				</template>
			</u-waterfall>
			<u-loadmore v-if="!list.length==total" bg-color="rgb(240, 240, 240)" :status="loadStatus"
				@loadmore="addRandomData"></u-loadmore>
		</view>
	</view>

</template>

<script>
	import {
		getgoods
	} from '../../service/api.js'
	export default{
		data() {
			return {
				title: "",
				loadStatus: 'loadmore',
				flowList: [],
				list: [
					
				],
				id:'',
				params: {
					pageNum: 1,
					pageSize: 10,
					orderByColumn: ""
				},
				total: ""
			}
		},
		onLoad() {
			this.getproducts();
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			if (this.list.length == this.total) {
		
			} else {
				this.getproducts();
				this.loadStatus = 'loadmore';
		
			}
		
		},
		methods: {
			
			
			//跳转全部订单
			all() {
					uni.navigateTo({
						url: `/My/order/index?status=0`
					})
			},
			goHome(){
				uni.switchTab({
					url: `/pages/index/index`
				})
			},
			//请求药品数据
			async getproducts() {
				let res = await getgoods(this.params)
				if (res.code == 200) {
					console.log(res, "888888")
					this.list = res.rows;
					this.total = res.total
					this.addRandomData();
				}
			},
		
		
		
			//跳转产品详情
			productClick(item) {
				console.log(item.id)
				uni.navigateTo({
					url: `/integration/productList/index?id=${item.id}`
				})
			},
			
			addRandomData() {
			  // 确保 list 有数据
			  if (this.list.length > 0) {
			    // 生成的数据条数不会超过 list.length
			    let numItemsToAdd = Math.min(10, this.list.length);
			    let selectedIndexes = new Set(); // 记录已选择的索引
			
			    for (let i = 0; i < numItemsToAdd; i++) {
			      let index;
			      do {
			        // 随机选择一个 index，直到这个 index 没有被选择过
			        index = this.$u.random(0, this.list.length - 1);
			      } while (selectedIndexes.has(index)); // 如果已选择过则重新随机选择
			
			      selectedIndexes.add(index); // 标记当前索引已经被选择
			
			      // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
			      let item = JSON.parse(JSON.stringify(this.list[index]));
			
			      // 如果希望保留原有 id，直接使用 item.id 而不调用 this.$u.guid()
			      item.id = item.id || 0; // 如果 item 没有 id，则设置为 0，避免 GUID 生成
			
			      if (item.photoUrl) {
			        let photoUrls = item.photoUrl.split(','); // 将 photoUrl 按逗号分割成数组
			        item.image = photoUrls[0]; // 将第一个 URL 赋值给 image
			      }
			
			      this.flowList.push(item);
			    }
			  }
			  
			},
		
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		padding-top: 370rpx;
	}
	.title {
		position: fixed;
		    width: 100%;
		    z-index: 10;
		    top: 0;
		    left: 0;
		    right: 0;
		background: #fff;

		.title-two {
			padding-bottom: 24rpx;

			.sucess {

				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}

				text {
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
				}
			}

			.btn-box {
				display: flex;
				justify-content: center;
				margin-top: 48rpx;

				.btn {
					text-align: center;
					line-height: 56rpx;
					width: 192rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					height: 56rpx;
					background: #CCA566;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}

				.btn:first-child {
					margin-right: 24rpx;
				}
			}
		}

	}

	.scroll-Y {

		height: calc(100vh - 297rpx);
	
		
		margin-top: 24rpx;

		.wrap {
			background: #F5F3F0;
			padding-top: 255rpx;
		}

		.demo-warter {
			border-radius: 8px;
			margin: 24rpx;
			background-color: #ffffff;

			position: relative;
		}

		.warter-right {
			margin-right: 12rpx;
		}

		.warter-left {
			margin-left: 12rpx;
		}

		.demo-image {
			width: 100%;
			border-radius: 4px;
		}

		.demo-title {
			font-size: 30rpx;

			color: $u-main-color;
		}

		.box {
			padding: 16rpx;
		}

		.demo-tag {
			display: flex;
			margin-top: 5px;
		}

		.demo-tag-owner {
			background-color: $u-type-error;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 4rpx 14rpx;
			border-radius: 50rpx;
			font-size: 20rpx;
			line-height: 1;
		}

		.demo-tag-text {
			border: 1px solid $u-type-primary;
			color: $u-type-primary;
			margin-left: 10px;
			border-radius: 50rpx;
			line-height: 1;
			padding: 4rpx 14rpx;
			display: flex;
			align-items: center;
			border-radius: 50rpx;
			font-size: 20rpx;
		}

		.demo-price {
			font-size: 30rpx;
			color: $u-type-error;
			margin-top: 5px;
		}

		.demo-shop {
			font-size: 22rpx;
			color: $u-tips-color;
			margin-top: 5px;
		}

		.demo-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>